<template>
  <div>
       <div style="padding:5.33vw 0"><span style="font-size:15px;color: #333333;font-weight: 600">评价</span><span style="float:right;font-size:13px;color: #666666">好评率{{applauseRate}}</span></div>
        <ul style="padding-bottom: 6.67vw">
            <li v-for="(v,i) in comments" :key='i'>
                <div class="user"><span><img :src="v.headImg" alt="" style="width:100%;height:100%"></span><span style="text-indent:1em;display: inline-block;color: #666666;font-family:PingFang-SC-Regular">{{v.username}}</span></div>
                <div class="content">
                    <p style="color:#333333">{{v.content}}</p>
                    <div>
                        <span>{{v.time}}</span>
                        <span>颜色尺寸：{{v.norms}}</span>
                    </div>
                </div>
            </li>
            <!-- <mu-container class="button-wrapper"> -->
            <mu-button color="#ffffff" textColor='#FF4C50' :ripple=false flat round style="border: 1px solid #FF4C50;border-radius:1000px;margin: 6.67vw auto;display:block;">查看全部评价</mu-button>
            <!-- <mu-container> -->
       </ul>     
  </div>
</template>
<script>
export default {
    name:'address',
    data () {
        return {
            
        }
    },
    props:['comments','applauseRate']
}
</script>
<style lang='scss'>
    .user{
        font-size: 13px;
        span:nth-child(1){
            display:inline-block;
            width: 8vw;
            border-radius:50%;
            height:8vw;
            overflow:hidden;
            vertical-align: middle;
        }
    }
    .content{
        p{
            margin: 2.4vw 0;
        }
        >div{
            span{
                font-size: 12px;
                color: #999999;
            }
        }
    }
</style>